$(function(){
	var countries1 = [
		{name:'美国',value: 389},
		{name:'日本',value: 259},
		{name:'德国',value: 262},
		{name:'英国',value: 324},
		{name:'法国',value: 232}
	];
	var countries2 = [
		{name:'美国',value: 389},
		{name:'日本',value: 259},
		{name:'德国',value: 262},
		{name:'英国',value: 324},
		{name:'法国',value: 232}
	];
	var goods1 = [
		{name:'汽车',value: 389},
		{name:'衣服',value: 259},
		{name:'家居',value: 262},
		{name:'食品',value: 324},
		{name:'玩具',value: 232}
	];
	var goods2 = [
		{name:'汽车',value: 389},
		{name:'手机',value: 259},
		{name:'电脑',value: 262},
		{name:'海鲜',value: 324},
		{name:'石油',value: 232}
	];
	var areaData = ['海州区', '新浦区', '连云区','赣榆县','灌云县','东海县','灌南县'];
	var areaVal = [520, 410, 325, 245, 182, 165, 142];
	var indusData = ['服装','家电','飞机','汽车','船舶','电子'];
	var indusVal = [650,580,496,387,298,160];
	changeRank("inport1",countries1,1,'进口国家TOP5排名','单位/万');//行业、税种、产业税收分布图表
	changeRank("export1",countries2,2,'出口国家TOP5排名','单位/万');//行业、税种、产业税收分布图表
	changeRank("inport2",goods1,3,'进口商品TOP5排名','单位/万');//行业、税种、产业税收分布图表
	changeRank("export2",goods2,4,'出口商品TOP5排名','单位/万');//行业、税种、产业税收分布图表
	areaChange("area",'区域经济总量排名',areaData,areaVal);//各区域经济总量排名
	areaChange("industries",'行业经济总量排名图',indusData,indusVal);//各行业经济总量排名
	showPersonDiffer("inout");//流入流出差异
	complex("complex");//生产总值及失业排名
})

//行业、税种、产业税收分布图表
/**
 * 
 * @param {Object} id 元素id
 * @param {Object} dataArr 数据对象
 * @param {Object} num 颜色编号
 * @param {Object} title 标题名
 * @param {Object} unit 单位名称
 */
function changeRank(id,dataArr,num,title,unit){
	var echartWidth = $(window).width() * 0.326;
	var echartHeight = $(window).height() * 0.298;
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById(id));
	/*根据浏览器宽、高设置echarts 宽、高*/
	
	myChart.resize({
	    width: echartWidth,
	    height: echartHeight,
	});
	/*end*/
	//var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
	//var yAxisData = ['原因1','原因2','原因3','原因4','原因5','原因6','原因7','原因8','原因9','原因10'];
	function numDescSort(a,b){//进行降序排序操作
		return a.value - b.value;
	}
	var convertData = dataArr;//数据
	var dataTitle = [];//标题
	convertData.sort(numDescSort);//对数据进行排序操作
	for(var i = 0 ;i < convertData.length; i++){
		dataTitle.push(convertData[i].name);
	}
	//定义不同的渐变色
	function colors(num){
		var color;
		if(num == 1){
			color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            "offset": 0,
            "color": "#ffb069" // 0% 处的颜色
        }, {
            "offset": 1,
            "color": "#ec2e85" // 100% 处的颜色
        }], false)
		}else if(num == 2){
			color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
	            offset: 0,
	            color: '#96d668'
	        }, {
	            offset: 1,
	            color: '#01babc'
	        }], false)
		}else if(num == 3){
	        color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
	            offset: 0,
	            color: '#1a98f8'
	        }, {
	            offset: 1,
	            color: '#7049f0'
	        }], false)
        }else{
	        color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
	            offset: 0,
	            color: '#7049f0'
	        }, {
	            offset: 1,
	            color: '#ffb069'
	        }], false)
        }
		return color;
	}

	var options = {
	    "title": {
	        "text": title,
	        "x": "center",
	        "textStyle": {
	        	"align": "center",
	            "color": "#bcbfff",
	            "fontWeight": "bold",
	            "fontSize": 14
	        },
	        /*"subtext": "单位/万元",
	        "subtextStyle": {
	        	"align": "left",
	        	"color": "#aaa"
	        }*/
	        /*"top": "4%",
	        "left": "2.2%"*/
	    },
	    "tooltip": {
	        "trigger": "item",
	        "axisPointer": { // 坐标轴指示器，坐标轴触发有效
	            "type": "shadow" // 默认为直线，可选为："line" | "shadow"
	        }
	    },
	    "grid": {
	    	"top": "18%",
	        "left": "3%",
	        "right": "10%",
	        "bottom": "0%",
	        "containLabel": true
	    },
	    "yAxis": [{
	        "type": "category",
	        "data": dataTitle,
	        "axisLine": {
	            "show": false
	        },
	        "axisTick": {
	            "show": false,
	            "alignWithLabel": true
	        },
	        "axisLabel": {
	            "textStyle": {
	                "color": "#ffb069"
	            }
	        }
	    },{
	    	name: unit,
	    	type: "value",
	    	nameTextStyle: {
	    		color: '#aaa',
	    		align: 'left'
	    	}
	    }],
	    "xAxis": [{
	        "type": "value",
	        "axisLine": {
	            "show": false
	        },
	        "axisTick": {
	            "show": false
	        },
	        "axisLabel": {
	            "show": false
	        },
	        "splitLine": {
	            "show": false
	        }
	    }],
	
	    "series": [{
	        "name": "税收额",
	        "type": "bar",
	        "data": convertData,
	        "barCategoryGap": "35%",
	        "label": {
	            "normal": {
	                "show": true,
	                "position": "right",
	                "formatter": function(params) {
	                    return params.data.value;
	                },
	                "textStyle": {
	                    "color": "#bcbfff" //color of value
	                }
	            }
	        },
	        "itemStyle": {
	            "normal": {
	                /*"color": new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
	                    "offset": 0,
	                    "color": "#ffb069" // 0% 处的颜色
	                }, {
	                    "offset": 1,
	                    "color": "#ec2e85" // 100% 处的颜色
	                }], false)*/
	               "color": colors(num)
	            }
	        }
	    }]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(options);
}

//拆线排名图表
function areaChange(id,title,axisData,valData){
	var echartWidth = $(window).width() * 0.326;
	var echartHeight = $(window).height() * 0.315;
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById(id));
	/*根据浏览器宽、高设置echarts 宽、高*/
	
	myChart.resize({
	    width: echartWidth,
	    height: echartHeight,
	});
	/*end*/
	var options = {
	    //backgroundColor: '#394056',
	    title: {
	        text: title,
	        textStyle: {
	            /*fontWeight: 'bold',*/
	            fontSize: 14,
	            color: '#fff'
	        },
	        left: '0%',
	        top: '2%'
	    },
	    tooltip: {
	        trigger: 'axis',
	        formatter: '{b}  <br/> {a} : {c}',
	        axisPointer: {
	            lineStyle: {
	                color: '#fff'
	            }
	        }
	    },
	    legend: {
	        icon: 'rect',
	        itemWidth: 14,
	        itemHeight: 5,
	        itemGap: 13,
	        data: [/*'办结',*/ '经济总量'],
	        right: '4%',
	        top: '4%',
	        textStyle: {
	            fontSize: 12,
	            color: '#fff'
	        }
	    },
	    grid: {
	    	top: '30%',
	        left: '2%',
	        right: '5%',
	        bottom: '0%',
	        containLabel: true
	    },
	    xAxis: [{
	        type: 'category',
	        boundaryGap: true,
	        axisLine: {
	            lineStyle: {
	                color: '#fff'
	            }
	        },
	        axisLabel: {
	            textStyle: {
	                color: '#fff',
	                fontSize: 12
	            },
	            //rotate: 40 //设置x轴文字旋转方向
	        },
	        data: axisData
	    }, {
	        axisPointer: {
	            show: false
	        },
	        axisLine: {
	            lineStyle: {
	                color: '#f3f3f3'
	            }
	        },
	        axisTick: {
	            show: false
	        },
	
	        position: 'bottom',
	        offset: 20,
	        /*data: ['', '', '', '', '', '', '',{
	            value: '周六',
	            textStyle: {
	                align: 'left'
	            }
	        }, '周日']*/
	    }],
	    yAxis: [{
	        type: 'value',
	        name: '单位(百万)',
	        axisTick: {
	            show: false
	        },
	        axisLine: {
	            lineStyle: {
	                color: '#fff'
	            }
	        },
	        axisLabel: {
	            margin: 10,
	            textStyle: {
	                fontSize: 12
	            }
	        },
	        splitLine: {//控制y轴的背景线段
	        	show: true,
	        	lineStyle: {
	        		color: '#aaa',
	        		type: 'dashed'
	        	}
	        },
	    }],
	    series: [/*{
	        name: '办结',
	        type: 'line',
	        smooth: true,
	        symbol: 'circle',
	        symbolSize: 5,
	        showSymbol: true,//显示拆线上的圆点
	        lineStyle: {
	            normal: {
	                width: 1
	            }
	        },
	        areaStyle: {
	            normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: 'rgba(137, 189, 27, 0.3)'
	                }, {
	                    offset: 0.8,
	                    color: 'rgba(137, 189, 27, 0.8)'
	                }], false),
	                shadowColor: 'rgba(0, 0, 0, 0.1)',
	                shadowBlur: 10
	            }
	        },
	        itemStyle: {
	            normal: {
	                color: '#ffc72b',
	                borderColor: 'rgba(137,189,2,0.27)',
	                borderWidth: 12
	
	            }
	        },
	        data: [220, 182, 191, 134, 150, 120, 110, 157, 213, 321, 432, 190]
	    },*/ {
	        name: '经济总量',
	        type: 'line',
	        smooth: true,
	        symbol: 'circle',
	        symbolSize: 5,
	        showSymbol: true,//显示拆线上的圆点
	        lineStyle: {
	            normal: {
	                width: 1
	            }
	        },
	        areaStyle: {
	            normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: 'rgba(235,41,125, 0.3)'//起始颜色
	                }, {
	                    offset: 0.8,
	                    color: 'rgba(235,41,125, 0.6)'//结束颜色
	                }], false),
	                shadowColor: 'rgba(0, 0, 0, 0.1)',
	                shadowBlur: 10
	            }
	        },
	        itemStyle: {
	            normal: {
	                color: 'rgba(235,41,125,1)',
	                borderColor: 'rgba(235,41,125,0.2)',
	                borderWidth: 12
	
	            }
	        },
	        data: valData
	    }]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(options);
}

/**
 * 从业人员流入流出差异对比
 * @param divName
 */
function showPersonDiffer(divName){
    var echartWidth = $(window).width() * 0.326;
    var echartHeight = $(window).height() * 0.32;
    //初始化echarts
    var myChart = echarts.init(document.getElementById(divName));
    myChart.resize({
        width: echartWidth,
        height: echartHeight,
    });
	//配置参数
    var options = {
        title: [{
            text: '从业人员流入流出差异对比',
           // left: '35%',
           // top: '3%',
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        }],
        // backgroundColor: "#424956",
        color: ["#f9882c", "#24c5fb"],
        textStyle: {
            color: "#ffffff",

        },
        legend: {
            right: '10',
            width: 50,
            itemWidth: 40,
            textStyle: {
                color: "#fff"
            },
            data: ['流入人数', '流出人数']
        },
        yAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },

            data: ['网络', '金融', '地产', '机械', '电子']
        }],
        xAxis: {
            "axisLine": {
                lineStyle: {
                    color: '#c0576d'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#c0576d'
                }
            },
            "axisTick": {
                "show": false
            },
            axisLabel: {
                textStyle: {
                    color: '#ffd285'
                }
            },
            type: 'value'
        },
        grid: {
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '8%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        series: [{
            name: '流出人数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 6,
                    color: '#ffd285'
                }
            },
            label: {//图形上的文本标签
                normal: {
                    show: true,
                   // position: 'top',
                    textStyle: {
                        color: '#a8aab0',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    },
                },
            },
            data: [120, 150, 160, 110, 195]
        }, {
            name: '流入人数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 6,
                    color: '#ec4863'
                }
            },
            label: {//图形上的文本标签
                normal: {
                    show: true,
                   // position: 'top',
                    textStyle: {
                        color: '#a8aab0',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    },
                },
            },
            data: [166, 135, 158, 210, 186]
        }, ]
    };
    //绘制图形
    myChart.setOption(options);
}
//生产总值及失业排名
function complex(id){
	var echartWidth = $(window).width() * 0.326;
	var echartHeight = $(window).height() * 0.588;
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById(id));
	/*根据浏览器宽、高设置echarts 宽、高*/
	
	myChart.resize({
	    width: echartWidth,
	    height: echartHeight,
	});
	/*end*/
	var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
	var yAxisData = ['行业1','行业2','行业3','行业4','行业5','行业6','行业7','行业8','行业9','行业10'];
	var options = {
	    //backgroundColor: '#0f375f',
	    title:[
	        {text:"三大产业生产总值占比",x: '5%', y: '1%',textStyle:{color:"#fff",fontSize:"14"}},
	        {text:"行业失业排名TOP10",x: '55%', y: '1%',textStyle:{color:"#fff",fontSize:"14"}},
	        {text:"行业生产总值前五占比",x: '5%', y: '50%',textStyle:{color:"#fff",fontSize:"14"}},
	    ],
	    grid: [
	        {x: '65%', y: '7%', width: '28%', height: '90%'},
	    ],
	    tooltip: {
	        /*formatter: '{b} ({c}亿元)'*/
	    },
	    xAxis: [
	        {gridIndex: 0, axisTick: {show:false},axisLabel: {show:false},splitLine: {show:false},axisLine: {show:false }},
	    ],
	    yAxis: [
	         {  gridIndex: 0, interval:0,data:yAxisData.reverse(),
	            axisTick: {show:false}, axisLabel: {show:true,textStyle:{"color": "#ffb069"}},splitLine: {show:false},
	            axisLine: {show:true,lineStyle:{color:"#6173a3"}},
	        }
	    ],
	    series: [
	        {
	            name: '三大产业生产总值占比',
	            tooltip: {
			        formatter: '{b} ({c}亿元)'
			    },
	            type: 'pie',
	            radius : '25%',
	            center: ['28%', '25%'],
	            color:['#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
	            data:[
	                {value:335, name:'第一产业'},
	                {value:310, name:'第二产业'},
	                {value:234, name:'第三产业'}/*,
	                {value:135, name:'质检总局'},
	                {value:105, name:'其他'},*/
	            ],
	            labelLine:{normal:{show:true}},
	            itemStyle: {normal: {label:{ show: true,  formatter: '{b} \n ({d}%)', textStyle:{color:'#B1B9D3'}} },},
	        },
	        {
	            name: '行业生产总值前五占比',
	            tooltip: {
			        formatter: '{b} ({c}亿元)'
			    },
	            type: 'pie',
	            radius : '25%',
	            center: ['28%', '75%'],
	            color:['#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
	            labelLine:{normal:{show:true}},
	            data:[
	                {value:335, name:'行业1'},
	                {value:310, name:'行业2'},
	                {value:234, name:'行业3'},
	                {value:135, name:'行业4'},
	                {value:105, name:'行业5'},
	            ],
	            itemStyle: {normal: {label:{ show: true,  formatter: '{b} \n ({d}%)', textStyle:{color:'#B1B9D3'}} },},
	        },
	        {
	            name: '行业失业排名TOP10',
	            tooltip: {
			        formatter: '{b} ({c}人)'
			    },
	            type: 'bar',xAxisIndex: 0,yAxisIndex: 0,barWidth:'45%',
	            itemStyle:{normal:{color:'#86c9f4'}},
	            label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
	            data: dataAll.sort(),
	        },
	        
	    ]
	};
	//绘制图形
    myChart.setOption(options);
}
